<template>
  <div class="location-select-container">
    <!-- 顶部导航 -->
    <header class="header">
      <div class="header-content">
        <i class="el-icon-arrow-left" @click="goBack"></i>
        <h2>选择城市</h2>
      </div>
    </header>

    <!-- 搜索框 -->
    <div class="search-section">
      <div class="search-container">
        <el-input
          v-model="searchKeyword"
          placeholder="请输入城市名称"
          prefix-icon="el-icon-search"
          clearable
          class="search-input"
        />
      </div>
    </div>

    <!-- 当前定位 -->
    <div class="current-location">
      <div class="location-title">当前定位</div>
      <div class="location-city" @click="useCurrentLocation">
        <i class="el-icon-location"></i>
        <span>{{ currentLocation }}</span>
        <span class="use-location">点击使用</span>
      </div>
    </div>

    <!-- 最近访问 -->
    <div class="recent-cities" v-if="recentCities.length > 0">
      <div class="section-title">最近访问</div>
      <div class="city-grid">
        <div 
          v-for="city in recentCities" 
          :key="city"
          class="city-item"
          @click="selectLocation(city)"
        >
          {{ city }}
        </div>
      </div>
    </div>

    <!-- 热门城市 -->
    <div class="hot-cities">
      <div class="section-title">热门城市</div>
      <div class="city-grid">
        <div 
          v-for="city in filteredHotCities" 
          :key="city.code"
          class="city-item"
          @click="selectLocation(city.name)"
        >
          {{ city.name }}
        </div>
      </div>
    </div>

    <!-- 城市列表 -->
    <div class="city-list">
      <div class="section-title">按字母排序</div>
      <div class="alphabet-list">
        <div v-for="(cities, letter) in filteredCitiesByLetter" :key="letter" class="letter-group">
          <div class="letter-header">{{ letter }}</div>
          <div class="city-items">
            <div 
              v-for="city in cities" 
              :key="city.code"
              class="city-row"
              @click="selectLocation(city.name)"
            >
              <span class="city-name">{{ city.name }}</span>
              <div class="city-options">
                <span class="select-city" @click.stop="selectLocation(city.name)">选择</span>
                <span class="select-district" @click.stop="openDistrictDialog(city)">区域</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 二级区域选择弹窗 -->
    <el-dialog
      :visible.sync="showDistrictDialog"
      :show-close="false"
      width="90%"
      class="district-dialog"
      :before-close="handleClose"
    >
      <div class="dialog-header">
        <i class="el-icon-arrow-left" @click="closeDistrictDialog"></i>
        <span>{{ selectedCity.name }}</span>
      </div>
      <div class="district-list">
        <div 
          class="district-item"
          @click="selectLocation(selectedCity.name)"
        >
          <span class="all-districts">全部</span>
        </div>
        <div 
          v-for="district in districts" 
          :key="district"
          class="district-item"
          @click="selectLocation(selectedCity.name + district)"
        >
          {{ district }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'LocationSelect',
  data() {
    return {
      searchKeyword: '',
      currentLocation: '上海',
      selectedCity: {},
      showDistrictDialog: false,
      recentCities: [],
      hotCities: [
        { name: '北京', code: 'beijing', districts: ['朝阳区', '海淀区', '西城区', '东城区'] },
        { name: '上海', code: 'shanghai', districts: ['浦东新区', '徐汇区', '静安区', '黄浦区'] },
        { name: '广州', code: 'guangzhou', districts: ['天河区', '越秀区', '荔湾区', '海珠区'] },
        { name: '深圳', code: 'shenzhen', districts: ['南山区', '福田区', '罗湖区', '宝安区'] },
        { name: '天津', code: 'tianjin', districts: ['和平区', '河西区', '南开区', '北辰区'] },
        { name: '重庆', code: 'chongqing', districts: ['渝中区', '江北区', '南岸区', '沙坪坝区'] },
        { name: '杭州', code: 'hangzhou', districts: ['西湖区', '上城区', '下城区', '江干区'] },
        { name: '南京', code: 'nanjing', districts: ['玄武区', '秦淮区', '建邺区', '鼓楼区'] }
      ],
      citiesByLetter: {
        'A': [
          { name: '鞍山', code: 'anshan', districts: ['铁东区', '铁西区', '立山区'] },
          { name: '安庆', code: 'anqing', districts: ['迎江区', '大观区', '宜秀区'] }
        ],
        'B': [
          { name: '北京', code: 'beijing', districts: ['朝阳区', '海淀区', '西城区', '东城区'] },
          { name: '保定', code: 'baoding', districts: ['竞秀区', '莲池区', '满城区'] },
          { name: '包头', code: 'baotou', districts: ['昆都仑区', '青山区', '东河区'] }
        ],
        'C': [
          { name: '重庆', code: 'chongqing', districts: ['渝中区', '江北区', '南岸区', '沙坪坝区'] },
          { name: '成都', code: 'chengdu', districts: ['锦江区', '青羊区', '金牛区', '武侯区'] },
          { name: '长沙', code: 'changsha', districts: ['芙蓉区', '天心区', '岳麓区', '开福区'] }
        ],
        'D': [
          { name: '大连', code: 'dalian', districts: ['中山区', '西岗区', '沙河口区', '甘井子区'] },
          { name: '东莞', code: 'dongguan', districts: ['南城街道', '东城街道', '万江街道'] }
        ],
        'G': [
          { name: '广州', code: 'guangzhou', districts: ['天河区', '越秀区', '荔湾区', '海珠区'] },
          { name: '贵阳', code: 'guiyang', districts: ['南明区', '云岩区', '花溪区', '乌当区'] }
        ],
        'H': [
          { name: '杭州', code: 'hangzhou', districts: ['西湖区', '上城区', '下城区', '江干区'] },
          { name: '哈尔滨', code: 'harbin', districts: ['道里区', '南岗区', '道外区', '香坊区'] },
          { name: '合肥', code: 'hefei', districts: ['瑶海区', '庐阳区', '蜀山区', '包河区'] },
          { name: '河北', code: 'hebei', districts: ['石家庄', '唐山', '秦皇岛', '邯郸'] }
        ],
        'J': [
          { name: '济南', code: 'jinan', districts: ['历下区', '市中区', '槐荫区', '天桥区'] },
          { name: '嘉兴', code: 'jiaxing', districts: ['南湖区', '秀洲区', '嘉善县'] }
        ],
        'K': [
          { name: '昆明', code: 'kunming', districts: ['五华区', '盘龙区', '官渡区', '西山区'] }
        ],
        'N': [
          { name: '南京', code: 'nanjing', districts: ['玄武区', '秦淮区', '建邺区', '鼓楼区'] },
          { name: '宁波', code: 'ningbo', districts: ['海曙区', '江北区', '北仑区', '镇海区'] }
        ],
        'Q': [
          { name: '青岛', code: 'qingdao', districts: ['市南区', '市北区', '李沧区', '崂山区'] }
        ],
        'S': [
          { name: '上海', code: 'shanghai', districts: ['浦东新区', '徐汇区', '静安区', '黄浦区'] },
          { name: '深圳', code: 'shenzhen', districts: ['南山区', '福田区', '罗湖区', '宝安区'] },
          { name: '沈阳', code: 'shenyang', districts: ['和平区', '沈河区', '大东区', '皇姑区'] },
          { name: '石家庄', code: 'shijiazhuang', districts: ['长安区', '桥西区', '新华区', '裕华区'] }
        ],
        'T': [
          { name: '天津', code: 'tianjin', districts: ['和平区', '河西区', '南开区', '北辰区'] },
          { name: '太原', code: 'taiyuan', districts: ['小店区', '迎泽区', '杏花岭区', '尖草坪区'] }
        ],
        'W': [
          { name: '武汉', code: 'wuhan', districts: ['江岸区', '江汉区', '硚口区', '汉阳区'] },
          { name: '无锡', code: 'wuxi', districts: ['崇安区', '南长区', '北塘区', '锡山区'] }
        ],
        'X': [
          { name: '西安', code: 'xian', districts: ['新城区', '碑林区', '莲湖区', '灞桥区'] },
          { name: '厦门', code: 'xiamen', districts: ['思明区', '海沧区', '湖里区', '集美区'] }
        ],
        'Z': [
          { name: '郑州', code: 'zhengzhou', districts: ['中原区', '二七区', '管城回族区', '金水区'] }
        ]
      },
      districts: [],
      selectedLocation: ''
    }
  },
  computed: {
    filteredHotCities() {
      if (!this.searchKeyword) return this.hotCities;
      return this.hotCities.filter(city => 
        city.name.includes(this.searchKeyword)
      );
    },
    filteredCitiesByLetter() {
      if (!this.searchKeyword) return this.citiesByLetter;
      
      const filtered = {};
      Object.keys(this.citiesByLetter).forEach(letter => {
        const cities = this.citiesByLetter[letter].filter(city => 
          city.name.includes(this.searchKeyword)
        );
        if (cities.length > 0) {
          filtered[letter] = cities;
        }
      });
      return filtered;
    }
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    useCurrentLocation() {
      this.selectLocation(this.currentLocation);
    },
    selectLocation(location) {
      // 保存到最近访问
      this.saveToRecent(location);
      
      // 更新当前位置并返回首页
      this.$router.push({
        path: '/',
        query: { location: location }
      });
    },
    openDistrictDialog(city) {
      this.selectedCity = city;
      this.districts = city.districts;
      this.showDistrictDialog = true;
    },
    closeDistrictDialog() {
      this.showDistrictDialog = false;
    },
    handleClose(done) {
      this.showDistrictDialog = false;
      done();
    },
    saveToRecent(location) {
      let recent = JSON.parse(localStorage.getItem('recentCities') || '[]');
      recent = recent.filter(item => item !== location);
      recent.unshift(location);
      recent = recent.slice(0, 6); // 最多保存6个
      localStorage.setItem('recentCities', JSON.stringify(recent));
      this.recentCities = recent;
    },
    loadRecentCities() {
      this.recentCities = JSON.parse(localStorage.getItem('recentCities') || '[]');
    }
  },
  mounted() {
    this.loadRecentCities();
    
    // 从URL参数获取当前位置
    const location = this.$route.query.location;
    if (location) {
      this.currentLocation = location;
    }
  }
}
</script>

<style scoped>
.location-select-container {
  min-height: 100vh;
  background: #f5f5f5;
}

.header {
  background: #fff;
  padding: 12px 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-content i {
  font-size: 20px;
  cursor: pointer;
}

.header-content h2 {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.search-section {
  background: #fff;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.search-container {
  position: relative;
}

.search-input .el-input__inner {
  border-radius: 20px;
  border: none;
  background: #f5f5f5;
  padding-left: 40px;
  height: 36px;
  font-size: 14px;
}

.current-location {
  background: #fff;
  margin: 12px;
  padding: 16px;
  border-radius: 8px;
}

.location-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.location-city {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #667eea;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 0;
}

.use-location {
  font-size: 12px;
  color: #999;
  font-weight: normal;
}

.hot-cities {
  background: #fff;
  margin: 12px;
  padding: 16px;
  border-radius: 8px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  color: #333;
}

.city-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.city-item {
  background: #f5f5f5;
  padding: 12px 8px;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.city-item:hover {
  background: #667eea;
  color: #fff;
}

.city-list {
  background: #fff;
  margin: 12px;
  border-radius: 8px;
  overflow: hidden;
}

.letter-group {
  margin-bottom: 8px;
}

.letter-header {
  background: #f5f5f5;
  padding: 8px 16px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.city-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.city-row:hover {
  background: #f9f9f9;
}

.city-row:last-child {
  border-bottom: none;
}

.city-name {
  font-size: 14px;
  color: #333;
}

.city-options {
  display: flex;
  gap: 8px;
  font-size: 12px;
}

.select-city {
  color: #667eea;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(102, 126, 234, 0.1);
}

.select-district {
  color: #999;
  padding: 4px 8px;
  border-radius: 4px;
  background: #f5f5f5;
}

.recent-cities {
  background: #fff;
  margin: 12px;
  padding: 16px;
  border-radius: 8px;
}

.district-dialog {
  border-radius: 16px 16px 0 0;
  margin: 0;
  margin-top: 50vh;
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 16px;
  font-weight: 500;
}

.dialog-header i {
  cursor: pointer;
  font-size: 20px;
}

.district-list {
  max-height: 50vh;
  overflow-y: auto;
  padding: 8px 0;
}

.district-item {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.district-item:hover {
  background: #f5f5f5;
}

.district-item:last-child {
  border-bottom: none;
}

.all-districts {
  color: #667eea;
  font-weight: 500;
}

@media (max-width: 768px) {
  .city-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
</style>